<template>
	<view class="complaint-content">
		<view class="top">
		<view class="title">填写意见建议</view>
		<view class="tips">温馨提示：请您对自己的言论负责。严格遵守中华人民共和国各项法律和规定，不得发表含有造谣、诽谤及反动内容的言论，如有违反,我们将根据情况追究留言者的责任。</view>
		</view>
		<view class="bottom">
			<view class="title"><text style="color: red;">*</text>手机号</view>
			<input v-model="form.realName" maxlength="11" type="text" placeholder="请输入您的手机号" class="input" />
			<view class="arrow"></view>
			<view class="title"><text style="color: red;">*</text>标题</view>
			<input v-model="form.realName"  type="text" placeholder="请输入标题" class="input" />
			<view class="arrow"></view>
			<view class="title"><text style="color: red;">*</text>意见建议</view>
			<textarea class="uni-textarea" v-model="text" placeholder="请输入意见建议内容" style="padding-top: 30rpx;"/>
			<view class="arrow"></view>
			<view class="title"><text style="color: red;">*</text>匿名提交</view>
			<view style="padding-top: 30rpx;">
			        <radio-group @change="chan">
			            <label style="float:left;width:60px;" v-for="item in radioGroup" :key="item">
			                <radio :value="item" :checked="item==activeRadio" />{{item}}
			            </label>
			        </radio-group>
			    </view>
			<view class="arrow" style="clear: both;margin-top: 70rpx;"></view>
			
			<view @click="handleSave" class="btn">确认提交</view>
			<view class="prompt">"<text style="color: red;">*</text>"为必填项</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				activeRadio:'', //存的是选中的value值
				radioGroup:['否','是']
			}
		},
		    methods:{
		        chan(e){
		            this.activeRadio = e.detail.value;
		            console.log(this.activeRadio);
		        }
		    }
	}
</script>

<style lang="scss" scoped>
	.complaint-content{
		width: 100%;
		display: flex;
		flex-direction: column;
		background-color: #f1efef;
			.top{
				background-color: #fff;
				padding: 30rpx;
			}
			.title{
				padding-top: 30rpx;
				font-weight: bold;
			}
			.tips{
				color: #737979;
				font-size: 25rpx;
				padding-top: 15rpx;
				line-height: 150%;
			}
			.bottom{
				margin-top: 30rpx;
				padding: 30rpx;
				background-color: #fff;
			}
			.input {
			    position: relative;
			    display: block;
			    height: 100%;
			    background: none;
			    color: inherit;
			    opacity: 1;
			    font: inherit;
			    line-height: inherit;
			    letter-spacing: inherit;
			    text-align: inherit;
			    text-indent: inherit;
			    text-transform: inherit;
			    text-shadow: inherit;
				padding-top: 25rpx;
			}
			.arrow{
				height: 3rpx;
				background-color: #f1efef;
				font-size: 24rpx;
				margin-top: 25rpx;
			}
			.btn{
				width: 350rpx;
				height: 80rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				background: #32CDCB;
				color: #fff;
				font-size: 28rpx;
				border-radius: 40rpx;
				margin: 0 auto;
				margin-top: 30rpx;
			}
			.prompt{
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 24rpx;
				border-radius: 40rpx;
				margin: 0 auto;
				color: #737979;
			}
	}
</style>